<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>显示隐藏</title>
	</head>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
			.box{
				width: 200px;
				height: 200px;
				background-color: red;
				margin: 0 auto;
				/* display: none;
				display: block; */
			}
			.box:hover p{
				/* display: none; */
				visibility: hidden;
			}
			.box2{
				width: 200px;
				height: 200px;
				background-color: blue;
			}
			.box:hover+.box2{
				/* display: none; */
				visibility: hidden;
			}
			.box3{
				width: 600px;
				height: 500px;
				background-color: chartreuse;
				opacity: .5;
			}
			img{
				/* opacity: 0; */
				/* opacity: .5; */
				width: 300px;
				height: 200px;
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<p>我会飞</p>
		</div>
		<div class="box2">
			
		</div>
		<p>
			王丝
		</p>
		<div class="box3">
			<img src="./img/1.jpg" alt="">
		</div>
	</body>
</html>